<template>
    <div v-if="islist" style="width:1000px;">    
        <el-button link type="parimary" @click="toMyBooking">返回我的预约</el-button>   
        <el-table :data="rooms" @select="getSelection" ref="roomRef">
            <el-table-column type="selection" width="55" />
            <el-table-column label="id" prop="roomId" />
            <el-table-column label="会议室名称" prop="roomName" />
            <el-table-column label="状态" prop="roomState" />
            <el-table-column label="位置" prop="roomAddr" />
            <el-table-column label="类型" prop="roomType" />
            <el-table-column label="说明" prop="roomComment" />
            <el-table-column label="操作">
                <template v-slot="scope">
                    <el-button link type="info" @click="getRoomBookingInfo(scope.row)">查看</el-button>
                    <el-button link type="primary" @click="bookingHandler(scope.row)">预约</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div v-else>
        <div v-if="isBooking">
            <el-card style="max-width: 480px">
    <template #header>
      <div class="card-header">
        <span>预约</span>
      </div>
    </template>
    <el-form :model="form" label-width="auto" :rules="loginRules" ref="loginFormRef"  style="width: 300px">
        <el-form-item label="开始时间" prop="username">
            <el-date-picker
                v-model="form.startTime"
                type="datetime"
                placeholder="请输入开始时间"
            />
        </el-form-item>
        <el-form-item label="结束时间" prop="password">
            <el-date-picker
                v-model="form.endTime"
                type="datetime"
                placeholder="请输入结束时间"
            />
        </el-form-item> 
        <el-form-item label="时长">
            <el-input v-model="form.timeLong" />
        </el-form-item>
        <el-form-item label="区间">
            <el-input v-model="form.timeQujian" />
        </el-form-item>
        <el-form-item>
        <el-button type="primary" @click="bookingAction">预约</el-button>
        <el-button @click="back">返回</el-button>
        </el-form-item>
  </el-form>
  </el-card>
        </div>
        <div v-else>
            <div>
                会议室名称:{{ roomName }}    <el-button style="float: right;" link @click="back">返回</el-button>
            </div>
            <el-table :data="timeslots" style="width: 1000px;">
                <el-table-column label="开始时间" prop="startTime" />
                <el-table-column label="结束时间" prop="endTime" />
                <el-table-column label="时长" prop="timeLong" />
                <el-table-column label="说明" prop="timeQujian" />
            </el-table>
        </div>
        
    </div>
    
</template>

<script>
import Room from '../../api/room'
import booking from '../../api/booking'
export default{
    data(){
        return{
            islist:true, /**判断是列表还是其他 */
            rooms:[],
            timeslots:[],
            form:{

            },
            isBooking:true, /**判断是添加还是删除 */
            roomName:''
        }
    },
    mounted(){
        this.getRooms()
    },
    methods:{
        getRooms(){
            Room.rooms().then(r=>{
                if(r.code==1){
                    this.rooms = r.data.records
                }
            })
        },
        getRoomBookingInfo(row){
            const params={}
            params.page=1
            params.limit = 10,
            params.roomid = row.roomId
            booking.roomBookingInfo(params).then(r=>{
                this.isBooking = false
                this.roomName = row.roomName 
                this.timeslots = r.data
                this.islist = false
            })
        },
        bookingHandler(row){
            this.islist = false
            this.isBooking = true
            this.form = {roomId:row.roomId}
            
        },
        bookingAction(){
            const uid = localStorage.getItem("userId")
            this.form.userId = uid
            this.form.state = 1
            console.log(this.form)
            const startTime = this.form.startTime
            const endTime = this.form.endTime

            const startDate =  new Date(startTime)
            const endDate = new Date(endTime)
            
            const startTime1 = startDate.getFullYear()+"-"+startDate.getMonth()+"-"+startDate.getDay()
            +" "+startDate.getHours()+":"+startDate.getMinutes()+":"+startDate.getSeconds()
            const endTime1 = endDate.getFullYear()+"-"+endDate.getMonth()+"-"+endDate.getDay()
            +" "+endDate.getHours()+":"+endDate.getMinutes()+":"+endDate.getSeconds()
            this.form.startTime = startTime1
            this.form.endTime = endTime1
            this.form.useYear = startDate.getFullYear()
            this.form.useMonth = startDate.getMonth()
            this.form.useDay = startDate.getDay()
            
            booking.addBooking(this.form).then(r=>{
                if(r.code==1){
                    alert("预约成功")
                    this.$router.push({name:'mybooking'})
                }else{
                    alert("预约失败")
                }
            })
            
        },

        back(){
            this.islist = true
        },
        toMyBooking(){
            this.$router.push({name:'mybooking'})
        }
        

    }
}
</script>